<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/boot3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/boot3/css/bootstrap.css">
    <title>Title</title>
</head>
<body>

<div>
    <li>名字:{$api_info->name}</li>
    <li> 地址:{$api_info->url}</li>
    <li>发送类型:{$api_info->to_type}</li>
    <li>返回数据类型{$api_info->re_type}</li>
</div>
<div>
    <div>
        <span>发送前数据</span>
    </div>

    <textarea name="send_data"  rows="5" cols="80" >{$api_info->data}</textarea>
</div>

<!-- Indicates a successful or positive action -->
<button onclick="send()"
        type="button" class="btn btn-success">Success</button>
<div>
    <div>结果数据</div>
    <div>
        <pre id="re_data_pre">
        {}
        </pre>
    </div>
</div>
<script>
    api_info = JSON.parse('{:json_encode($api_info)}');
    /**
     * 发送数据
     */
    function send(){
        var data_str=$('[name="send_data"]').val();
        console.log(data_str);
        var dataObject=JSON.parse(data_str);

        $.ajax({
            url: "test.html",
            type:api_info.to_type,
            data:dataObject,
            dataType: api_info.re_type,
            success: ajax_success,
        });
    }
    function ajax_success($data){
        console.log($data);
        var redata='';
        if(api_info.re_type==='json'){
            redata=JSON.stringify($data,null, "\t");
        }
        $('#re_data_pre').html(redata);
    }
</script>

</body>
</html>
